/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {AutoComplete, Button, Form, Input, InputNumber, notification, Select} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import DescGroup from "../../../components/DescriptionGroup";
import ViewTitle from "../../../components/ViewTitle";
import {FormField, FormLayout, ModalFooter} from "antd-extra";
import notify from "../../../components/NotificationExtra";

const {Option} = Select;
moment.locale('zh-cn');
const table = 'ProcureOrder';
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            material,
            store
          }) => ({...user, ...material, ...dynamicLabel, ...global, ...store}))
export default class ModalSelectProcureOrder extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {

  }

  async onDataLoad() {

  }

  renderFoot = () => {
    const {foot, value, modalRef, form, callback} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            const {modalRef, record = {}} = this.props;
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              _.merge(values, this.state);
              _.merge(record, values);
              values.materialCode = values.materialCode ? values.materialCode : 'MAT' + new Date().valueOf();
              callback(values);
              modalRef.close();
            });
          }}>确定</Button>

          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  onSelect = (value, option) => {
    const {key, props} = option;
    const {label} = props;

    this.state[`${label}Code`] = key;
    this.state[`${label}`] = value;

    const material = _.find(this.props.materials, item => {
      return item.code === key;
    });
    this.state["subcategory"] = material ? material.subcategory : '';
    this.state["materialCode"] = material && material.code ? material.code : 'MAT' + new Date().valueOf();
  };

  getMaterialInfo() {
    const {form, cols = 1, materials, record = {}} = this.props;
    const {material, materialCount = 0, materialContent = 0, cost = 0} = record;
    return <FormLayout form={form} cols={cols}>
      <FormField
        label={'原料'}
        name={'material'}
        required={true}
        initialValue={material}
      >
        <AutoComplete style={{width: '100%'}}
                      dataSource={this.getOpt('material', materials)}
                      filterOption={(inputValue, option) =>
                        option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                      }
                      allowClear
                      onSelect={this.onSelect}
        >
        </AutoComplete>
      </FormField>
      <FormField
        label={'原料含量%'}
        name={'materialContent'} initialValue={materialContent}
      >
        <Input style={{width: '100%'}}></Input>
      </FormField>
      <FormField
        label={'原料用量'}
        name={'materialCount'} initialValue={materialCount}
      >
        <InputNumber style={{width: '100%'}}></InputNumber>
      </FormField>

      <FormField
        label={'成本'}
        name={'cost'} initialValue={cost}
      >
        <Input style={{width: '100%'}}></Input>
      </FormField>
    </FormLayout>;
  }

  render() {
    const {style} = this.props;

    return (
      <div style={{...style}}>
        {this.getMaterialInfo()}
        {this.renderFoot()}
      </div>

    );
  }
}

